<template>
   <div class="box">
    <h1>ref的使用</h1>
     <button @click="changeColor('teal')">teal</button>
     <button @click="changeColor('tomato')">tomato</button>
     <div class="content" ref="div"></div>

     <button @click="changeChild">潘安</button>
     <v-child ref="child"></v-child>
   </div>
</template>

<script>
import vChild from './vChild.vue';
export default {
    components:{
        vChild
    },
    methods:{
        //ref作用1:操作dom节点
        //1.给标签绑定ref属性
        //2.就可以通过this.$refs获取到这个dom节点
        changeColor(color){
            //改颜色
            console.log(this.$refs); //可以获取到所有ref绑定的dom节点
            console.log(this.$refs.div); // <div class="content" ref="div"></div>
            this.$refs.div.style.background = color;
        },

        //ref作用2：获取子组件的所有数据
        //1.给子组件绑定ref属性
        //2.就可以通过this.$refs.child  VueComponent（子组件this-vue实例）
        changeChild(){
            console.log(this.$refs.child); //数据和方法
            console.log(this.$refs.child.name);
            console.log(this.$refs.child.changeName);

            //改名字
            // this.$refs.child.name = "潘安"
            this.$refs.child.changeName("潘安")

        }

    }
}
</script>

<style scoped>
    .content{
        width: 200px;
        height: 200px;
        background: #ccc;
    }
</style>